<template>
	<view class="container">
	<!-- 明细 -->
	<view class="detail">
		<view class="detailHder">
			<image src="https://pubuimg.cqguanjie.cn/chat/16948580779132"></image>
			<text>提现记录</text>
		</view>
		<!-- 空数据 -->
		<view class="empty" v-if="data.detailsList.length==0">
			<empty></empty>
		</view>
		<!-- 有钱包明细 -->
		<view class="moneys" v-else>
				<view class="moneysFor" v-for="(item,index) in data.detailsList" :key="index">
					<view class="information">
						<text class="text" v-if="!item.reason">{{data.walletList[item.state].name}}</text>
						<text class="text" v-else>失败：{{item.reason}}</text>
						<text class="date">{{$clearTime(item.created_at)}}</text>
					</view>
					<view class="moneyl">
						<text>{{$toFiexd(item.money,2)}}</text>
						<view>支付:{{$toFiexd(item.pay_money,2)}}</view>
					</view>
				</view>
		</view>
	</view>
	</view>
</template>

<script setup>
	import {ref,reactive,getCurrentInstance} from "vue";
	import {onLoad,onShow,onPullDownRefresh,onReachBottom} from "@dcloudio/uni-app";
	const {proxy} = getCurrentInstance();
	const data = reactive({
		page:0,
		pages:1,
		size:10,
		detailsList:[],
		walletList:[{id:0, name:'待审核'},
		      {id:1, name:'初审通过'},
		      {id:2, name:'终审通过'},
		      {id:3, name:'下发中'},
		      {id:4, name:'失败'},]
	})
	onLoad((option)=>{
	})
	onShow(()=>{
		cash()
	})
	onPullDownRefresh(()=> {
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		})
	onReachBottom(()=>{
		cash()
		console.log('onReachBottom')
	})

	
	function cash (){
		if(data.page<data.pages){
			data.page++
			proxy.$SHOPrequest({
			url: `business/cash/?page=1&size=999`,
			method: 'get',
			success(res) {
				data.pages = Math.ceil(res.data.total / data.size)
				
				res.data.data.forEach(item=>{
					data.detailsList.push(item)
				})
			}
		})
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		padding: 30upx;
		.detail{
			background-color: #fff;
			padding: 30px 20upx;
			border-radius: 10px;
			.detailHder{
				width: 100%;
				image{
					width: 4px;
					height: 12px;
					margin: 0 4px 0 15px;
				}
				text{
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					text-align: left;
					color: #333333;
				}
			}
			.empty{
			}
			.moneys{
				width: 100%;
				.moneysFor{
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1px solid rgb(245, 245, 245);
					padding: 15px;
					.information{
						display: flex;
						flex-direction: column;
						.text{
							color: #333;
							font-weight: 700;
							font-size: 13px;
						}
						.source{
							text{
								color: rgb(153, 153, 153);
								font-size: 14px;
							}
						}
						.date{
							color: rgb(153, 153, 153);
							font-size: 14px;
						}
					}
					.moneyl{
						text{
							color: #f4391c;
							font-size: 16px;
							font-weight: 700;
						}
						view{
							font-size: 12px;
							color: #999;
						}
					}
				}
			}
		}
	}
</style>
